<template>
  <div id="Header">
    <el-row style="height: 100%">
      <el-col :span="4" :offset="1  " style="display: flex;height: 100%; align-items: center">
<!--        <el-image style="height: 70px;border-radius: 50%" :src="url" :fit="fits[2]"></el-image>-->
        <img :src="src" style="height: 50px;border-radius: 50%" alt="">
      </el-col>
      <el-col :span="8" :offset="2">
        <div id="discrib">
          <h1>餐饮管理系统</h1>
        </div>
      </el-col>
      <el-col>
        <div id="avatar" :span="8" :offset="2" @click="personalCenter" style="line-height: 50px; color: white">
<!--          <el-avatar :size="50" :src="circleUrl"></el-avatar>-->
          <i class="el-icon-user"></i>
        </div>
        <div id="icon">
          <el-tooltip placement="top" effect="light">
            <div slot="content">员工名字: {{$store.state.userName}}<br />员工身份: {{$store.state.jobName}}</div>
            <i class="el-icon-caret-bottom"></i>
          </el-tooltip>
          <el-tooltip placement="top" effect="light">
            <div slot="content">通知：<br />暂无公告</div>
            <i class="el-icon-message-solid"></i>
          </el-tooltip>
          <i class="el-icon-s-tools"></i>
          
          
          <i class="el-icon-circle-close" @click="exit"></i>
        </div>
      </el-col>
    </el-row>
  </div>
</template>




<script>
  import Logo from '../../assets/logo.jpg'
export default {
  name: 'Header',
  data() {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      src: Logo
    }
  },
  methods:{
  	exit(){
      // 清除sessionStorage 里面的所有内容
      sessionStorage.removeItem('jobName')
      sessionStorage.removeItem('userName')
      sessionStorage.removeItem('token')
      sessionStorage.removeItem('loginUserId')
      sessionStorage.removeItem('roleId')
      sessionStorage.removeItem('loginAllInfo')
      this.$store.state.loginUser=undefined,
      this.$store.state.jobName=undefined,
      this.$store.state.userName=undefined,
      this.$router.push('/login')
  	},
    personalCenter(){
  	  this.$router.push('/personalCenter')
    },
  }

}

</script>
<style lang="less" scoped>
	#Header{
		height: 70px;
		position: relative;
		.el-image{
			position: absolute;
			left: 0px;
			top: 0px;
		}
		#discrib{
			position: absolute;
			left: 50%;
			line-height: 70px;
			transform: translateX(-50%);
			color: white;
		}
		#avatar{
			position: absolute;
			height: 50px;
			right: 130px;
			top: 10px;
			span {
				margin: 0 10px;
			}
		}
		#icon {
			position: absolute;
			height: 20px;
			right: 10px;
			top: 25px;
			line-height:70px;
			
			i{
				font-size: 20px;
				float: left;
				// display: inline-block;
				color: white;
				margin-right: 10px;
			}
		}

	}
</style>
